<template>
  <div class="test-ai-page">
    <div class="test-header">
      <h2>AI助手功能测试</h2>
      <p>测试DeepSeek API连接和AI助手功能</p>
    </div>

    <div class="test-content">
      <!-- API状态测试 -->
      <div class="test-section">
        <h3>API连接测试</h3>
        <div class="status-display">
          <div class="status-item">
            <span class="status-label">API密钥状态：</span>
            <span class="status-value" :class="{ 'success': hasApiKey, 'error': !hasApiKey }">
              {{ hasApiKey ? '已配置' : '未配置' }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">API连接状态：</span>
            <span class="status-value" :class="{ 'success': apiStatus, 'error': !apiStatus }">
              {{ apiStatus ? '连接正常' : '连接失败' }}
            </span>
          </div>
        </div>
        <el-button @click="testApiConnection" :loading="testingApi">
          测试API连接
        </el-button>
      </div>

      <!-- 简单对话测试 -->
      <div class="test-section">
        <h3>简单对话测试</h3>
        <div class="test-input">
          <el-input 
            v-model="testMessage" 
            placeholder="输入测试消息..."
            @keyup.enter="testChat"
          />
          <el-button @click="testChat" :loading="testingChat">
            发送测试
          </el-button>
        </div>
        <div v-if="testResponse" class="test-response">
          <h4>AI回复：</h4>
          <div class="response-content">{{ testResponse }}</div>
        </div>
      </div>

      <!-- 环境变量检查 -->
      <div class="test-section">
        <h3>环境变量检查</h3>
        <div class="env-info">
          <div class="env-item">
            <span class="env-label">VITE_DEEPSEEK_API_KEY：</span>
            <span class="env-value">{{ maskApiKey(envConfig.DEEPSEEK_API_KEY) }}</span>
          </div>
          <div class="env-item">
            <span class="env-label">VITE_DEEPSEEK_BASE_URL：</span>
            <span class="env-value">{{ envConfig.DEEPSEEK_BASE_URL }}</span>
          </div>
          <div class="env-item">
            <span class="env-label">VITE_ENABLE_AI：</span>
            <span class="env-value">{{ envConfig.ENABLE_AI }}</span>
          </div>
        </div>
      </div>

      <!-- 错误日志 -->
      <div v-if="errorLog.length > 0" class="test-section">
        <h3>错误日志</h3>
        <div class="error-log">
          <div v-for="(error, index) in errorLog" :key="index" class="error-item">
            <span class="error-time">{{ error.time }}</span>
            <span class="error-message">{{ error.message }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAIStatus, chatWithAI, mockAIResponse } from '@/api/ai'
import { ENV_CONFIG } from '@/config/env.js'

const hasApiKey = ref(false)
const apiStatus = ref(false)
const testingApi = ref(false)
const testingChat = ref(false)
const testMessage = ref('')
const testResponse = ref('')
const errorLog = ref([])
const envConfig = ref(ENV_CONFIG)

// 检查API密钥
const checkApiKey = () => {
  hasApiKey.value = !!envConfig.value.DEEPSEEK_API_KEY && 
                   envConfig.value.DEEPSEEK_API_KEY !== '<DeepSeek API Key>'
}

// 掩码API密钥
const maskApiKey = (key) => {
  if (!key || key === '<DeepSeek API Key>') return '未配置'
  if (key.length <= 8) return '*'.repeat(key.length)
  return key.substring(0, 4) + '*'.repeat(key.length - 8) + key.substring(key.length - 4)
}

// 测试API连接
const testApiConnection = async () => {
  testingApi.value = true
  try {
    const result = await getAIStatus()
    apiStatus.value = result.code === 200
    if (apiStatus.value) {
      ElMessage.success('API连接测试成功')
    } else {
      ElMessage.error('API连接测试失败')
    }
  } catch (error) {
    apiStatus.value = false
    addErrorLog('API连接测试失败: ' + error.message)
    ElMessage.error('API连接测试失败')
  } finally {
    testingApi.value = false
  }
}

// 测试对话
const testChat = async () => {
  if (!testMessage.value.trim()) {
    ElMessage.warning('请输入测试消息')
    return
  }

  testingChat.value = true
  try {
    let response
    if (hasApiKey.value && apiStatus.value) {
      response = await chatWithAI(testMessage.value)
    } else {
      response = await mockAIResponse(testMessage.value)
    }
    
    testResponse.value = response.data || '无回复内容'
    ElMessage.success('对话测试成功')
  } catch (error) {
    addErrorLog('对话测试失败: ' + error.message)
    ElMessage.error('对话测试失败')
  } finally {
    testingChat.value = false
  }
}

// 添加错误日志
const addErrorLog = (message) => {
  errorLog.value.unshift({
    time: new Date().toLocaleTimeString(),
    message
  })
  // 只保留最近10条错误
  if (errorLog.value.length > 10) {
    errorLog.value = errorLog.value.slice(0, 10)
  }
}

// 组件挂载时检查配置
onMounted(() => {
  checkApiKey()
})
</script>

<style scoped>
.test-ai-page {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
}

.test-header h2 {
  color: #333;
  margin-bottom: 8px;
}

.test-header p {
  color: #666;
  margin: 0;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.test-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
}

.status-display {
  margin-bottom: 16px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.status-label {
  font-weight: 500;
  color: #333;
}

.status-value {
  font-weight: 600;
}

.status-value.success {
  color: #67c23a;
}

.status-value.error {
  color: #f56c6c;
}

.test-input {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.test-input .el-input {
  flex: 1;
}

.test-response {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.test-response h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.response-content {
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
}

.env-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.env-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.env-label {
  font-weight: 500;
  color: #333;
}

.env-value {
  font-family: monospace;
  color: #666;
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #ddd;
}

.error-log {
  max-height: 200px;
  overflow-y: auto;
}

.error-item {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background: #fef0f0;
  border-radius: 4px;
  margin-bottom: 8px;
  border-left: 4px solid #f56c6c;
}

.error-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.error-message {
  color: #f56c6c;
  flex: 1;
}
</style> 